<template>
  <div class="product-list">
    <!--搜索表单-->
    <div class="common-form">发货单信息</div>

    <el-form :model="orderFrom" disabled label-width="150px" class="demo-form-inline">
      <el-row>
        <el-col :span="12">
          <el-form-item label="发货单号">
            <el-input v-model="orderFrom.deliveryNo" placeholder="请输入发货单号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">

          <el-form-item label="发货日期">
            <el-date-picker style="width: 100%;" v-model="orderFrom.deliveryTime" type="datetime" placeholder="选择发货日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发货方式">
            <el-select clearable disabled placeholder="请选择发货方式" @change="onFilterChnage"
              v-model="orderFrom.deliveryType">
              <el-option v-for="(item, index) in deliveryTypeList" :key="index" :label="item.name"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发货人">
            <el-input v-model="orderFrom.deliveryUserName" placeholder="请输入发货人" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称">
            <el-input v-model="orderFrom.extractName" placeholder="请输入客户" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售订单号">
            <el-input v-model="orderFrom.orderNo" placeholder="请输入销售订单号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单总金额">
            <el-input-number style="width: 100%;" min="0" v-model="orderFrom.orderPrice" clearable></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠总金额">
            <el-input-number style="width: 100%;" min="0" v-model="orderFrom.couponMoney" clearable></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际付款金额">
            <el-input style="width: 100%;" :value="orderFrom && orderFrom.realPayPrice" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订金满百补位金额">
            <el-input style="width: 100%;" :value="orderFrom && orderFrom.depositOutAmount" clearable></el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div class="common-form">发货单明细</div>
    <div style="display: flex;justify-content: right;margin-bottom: 10px;margin-right: 23px;">
      <el-button type="primary" size="mini" @click="addSP()">新增商品</el-button>
    </div>
    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table :data="orderProduct" border style="width: 100%" min-height="200"
          v-loading="loading || rowCountLoading">
          <el-table-column prop="imagePath" fixed label="商品图片" min-width="150px">
            <template #default="scope">
              <div class="product-info">
                <div class="info">
                  <img style="width: 100px;height: 100px;" :src="scope.row.imagePath" alt="">
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="productName" fixed label="商品名称" min-width="130px">
            <template #default="scope">
              <div class="product-info">
                <div class="info">
                  <div class="name">{{ scope.row.productName }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="productAttr" label="商品规格" min-width="180">
            <template #default="scope">
              <div v-if="scope.row.sendType == '40'">
                <span v-for="(val, index) in scope.row.productAttr && ((scope.row.productAttr.split(';')).splice(0, 2))"
                  :key="index">
                  {{ val.split(":")[0] + ':' }} <el-tag>{{ val.split(":")[1] }}</el-tag></span>
                <span>颜色：<el-tag v-for="(cor) in scope.row.colorList" @click="tagClick(scope.row, cor)"
                    :effect="cor.check ? 'dark' : ''">{{ cor.color }}</el-tag></span>
              </div>
              <span v-else>{{ scope.row.productAttr }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="productPrice" label="商品价格" min-width="90">
            <template #default="scope">
              <!-- <div>￥{{ scope.row.productPrice }}</div> -->
              <el-input oninput="value=value.replace(/[^\d.]/g,'')" @input="selCount(scope.row)"
                v-model="scope.row.productPrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="totalNum" label="购买数量" min-width="90">
            <template #default="scope">
              {{ scope.row.totalNum }}
            </template>
          </el-table-column>
          <el-table-column prop="totalPrice" label="总价" min-width="130">
            <template #default="scope">
              <div>￥{{ scope.row.totalPrice }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="deliveryNum" label="已发货数量" min-width="100"></el-table-column>
          <el-table-column prop="orderProductType" label="商品类型" width="130">
            <template #default="scope">
              <el-select clearable v-model="scope.row.orderProductType" placeholder="请选择商品类型"
                @change="selCount(scope.row)">
                <el-option :label="item1.name" :value="item1.id" v-for="(item1, index1) in orderProductTypeList"
                  :key="index1"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="deliveryCount" label="发货数量" min-width="130">
            <template #default="scope">
              <!-- v-if="scope.row.sendType == '30' || scope.row.sendType == '40'" -->
              <el-input :disabled="scope.row.isEdit" oninput="value=value.replace(/[^\d.]/g,'')"
                @input="selCount(scope.row)" placeholder="输入发货数量" v-model="scope.row.deliveryCount"></el-input>
              <!-- <span v-else>{{ scope.row.deliveryCount }}</span> -->
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="200">
            <template #default="scope">
              <el-input type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit
                v-model="scope.row.remark" />
            </template>
          </el-table-column>
          <el-table-column prop="deliveryAmount" label="发货金额" min-width="130">
            <template #default="scope">
              <div>￥{{ scope.row.deliveryAmount }}</div>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="80">
            <template #default="scope">
              <!-- v-if="scope.row.sendType == '30' || scope.row.sendType == '40'"  -->
              <el-button v-if="orderProduct && orderProduct.length > 1" type="danger" size="small"
                @click="delRow(scope.row)">删除</el-button>
              <!-- <div v-else>
                <el-button type="primary" size="mini" @click="copyRow(scope.row, '30')">超量发货</el-button>
                <el-button v-if="scope.row.skuNum > 1" :disabled="scope.row.isEdit" type="primary" size="mini"
                  @click="copyRow(scope.row, '40')">超规格发货</el-button>
              </div> -->
            </template>
          </el-table-column>
        </el-table>


      </div>
      <div class="dialog-footer" style="display: flex;gap: 10px;">
        <div style="display: flex;gap: 10px;align-items: center;">
          <div>发货总金额：￥{{ orderFrom.deliveryBeforeAmount || '0.00' }}</div>
          <div>扣减补位金额：￥{{ orderFrom.depositOutPrice || '0.00' }}</div>
          <div>本次发货总金额：￥{{ orderFrom.deliveryAmount || '0.00' }}</div>
        </div>
        <div>
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" :loading="saveLoading" @click="addSave">提交</el-button>
        </div>

      </div>
    </div>

    <!-- 商品弹出 -->

    <el-dialog title="选择商品" v-model="orderCreate" width="90%">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input size="small" v-model="orderProductForm.productName" placeholder="商品名称查询"
            style="width: 40%; margin: 5px 0px">
            <template #append>
              <el-button type="primary" @click="productSearch">查询</el-button>
            </template>
          </el-input>
          <el-table style="width: 100%" border :data="orderProducts" v-loading="orderProductLoading" max-height="350">
            <el-table-column prop="productName" label="名称" width="180" />
            <el-table-column prop="categoryParentName" label="品种" width="100" />
            <el-table-column prop="categoryName" label="分类" width="100" />
            <el-table-column prop="spec" label="规格" width="300">
              <template #default="scope">{{ scope.row.color }},{{ scope.row.sku }}</template>
            </el-table-column>
            <el-table-column prop="stockNum" label="库存" width="80" />
            <el-table-column prop="minBuyCount" label="最小起订数量" width="150" />
            <el-table-column prop="depositRatio" label="定金比例" width="130" />

            <el-table-column prop="produceAddressTxt" label="种植基地" width="130" />
            <el-table-column prop="num" label="操作" width="100" fixed="right">
              <template #default="scope">
                <el-button @click="orderPSClick(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageselect">
            <el-pagination background :default-page-size="orderProductForm.pageSize" @current-change="prodcutCurrent"
              layout="prev, pager, next,total" :total="spTotal" />
          </div>
        </el-col>
        <el-col :span="12">
          <p style="margin-top: 20px">已选商品</p>
          <el-table style="width: 100%" border :data="orderSelctProduct" max-height="350">
            <el-table-column prop="productName" label="名称" width="180" />
            <el-table-column prop="categoryParentName" label="品种" width="100" />
            <el-table-column prop="categoryName" label="分类" width="100" />
            <el-table-column prop="spec" label="规格" width="300">
              <template #default="scope">{{ scope.row.color }},{{ scope.row.sku }}</template>
            </el-table-column>
            <el-table-column prop="stockNum" label="库存" width="100" />
            <el-table-column prop="produceAddressTxt" label="种植基地" width="130" />
            <el-table-column prop="minBuyCount" label="最小起订数量" width="150" />
            <el-table-column prop="orderProductType" label="商品类型" width="130">
              <template #default="scope">
                <el-select v-model="scope.row.orderProductType" placeholder="请选择商品类型">
                  <el-option :label="item1.name" :value="item1.id" v-for="(item1, index1) in orderProductTypeList"
                    :key="index1"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="sl" label="数量" width="100">
              <template #default="scope">
                <el-input-number :min="scope.row.minBuyCount" v-model="scope.row.sl" :max="scope.row.stockNum"
                  style="width: 95%" :controls="false" />
              </template>
            </el-table-column>
            <el-table-column prop="depositRatio" label="定金比例" width="100">
              <!-- <template #default="scope">
                  <el-tooltip content="请填写小数，如 50% 请填写 0.5">
                    <el-input-number :min="0" :max="1" v-model="scope.row.depositRatio" style="width: 95%"
                      :controls="false" />
                  </el-tooltip>
                </template> -->
            </el-table-column>

            <el-table-column prop="num" label="操作" width="100" fixed="right">
              <template #default="scope">
                <el-button type="danger" @click="orderPDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <div class="dialog-footer">
        <el-button @click="onCreaeOrderCancle">关闭</el-button>
        <el-button type="primary" :loading="orderloading" @click="onCreaeOrderSave">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ProductApi from '@/api/product.js';
import OrderApi from "@/api/order.js";
import { defaultPageSize } from '@/utils/table.js'
export default {
  components: {},
  props: {
    rowData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      pageParameter: {},
      orderSelctProduct: [],

      orderFrom: {},
      rowCountLoading: false,
      orderProduct: [],
      spTotal: 0,
      orderProductLoading: false,
      orderProductForm: {
        pageIndex: 1,
        pageSize: 5,
        productName: "",
      },
      orderProducts: [],
      options: [
        {
          value: '1',
          label: '已发货'
        },
        {
          value: '2',
          label: '未发货'
        }
      ],
      deliveryTypeList: [
        { name: '门店自提', value: 20 },
      ],
      saveLoading: false,
      /*是否正在加载*/
      loading: false,
      tableData: [],
      /*一页多少条*/
      pageSize: defaultPageSize,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      orderCreate: false,
      // 是否点击按钮
      isClickRow: false,
      orderProductTypeList: [
        {
          name: '销售',
          id: 10
        },
        {
          name: '赠品',
          id: 20
        },
        {
          name: '赔付',
          id: 30
        }
      ],
    };
  },
  created() {
    // 获取发货信息
    if (this.rowData && this.rowData.orderId) {
      this.getData()
    }
  },
  methods: {
    // 发货单新增商品
    addSP() {
      this.loadProducts()
      this.orderCreate = true
    },
    productSearch() {
      this.orderProductForm.pageIndex = 1;
      this.loadProducts();
    },
    prodcutCurrent(index) {
      this.orderProductForm.pageIndex = index;
      this.loadProducts();
    },
    orderPSClick(row) {
      // if (row.stockNum == 0) {
      //   return ElMessage.error("该商品库存为0,请重新选择");
      // }
      const $this = this;
      if ($this.orderSelctProduct.length > 0) {
        // const adress = $this.orderSelctProduct.find(
        //   (f) => f.produceAddress !== row.produceAddress
        // );
        // if (adress) {
        //   ElMessage.error("请选择相同基地的商品");
        //   return;
        // }

        const model = $this.orderSelctProduct.find(
          (f) => f.productSkuId === row.productSkuId
        );
        if (!model) {
          $this.orderSelctProduct.push({
            productSkuId: row.productSkuId,
            productName: row.productName,
            categoryName: row.categoryName,
            productId: row.productId,
            categoryParentName: row.categoryParentName,
            sl: row.minBuyCount, //默认最小起订数量
            color: row.color,
            productPrice: row.productPrice,
            minBuyCount: row.minBuyCount,
            sku: row.sku,
            imagePath: row.imagePath,
            orderProductType: row.orderProductType || 10,
            productAttr: row.productAttr,
            stockNum: parseInt(row.stockNum),
            depositRatio: Number(row.depositRatio),
            produceAddress: row.produceAddress,
            produceAddressTxt: row.produceAddressTxt,
            sendDate: row.sendDate
          });
        } else {
          ElMessage.error("此商品重复");
        }
      } else {
        $this.orderSelctProduct.push({
          productSkuId: row.productSkuId,
          productName: row.productName,
          categoryName: row.categoryName,
          productPrice: row.productPrice,
          productId: row.productId,
          categoryParentName: row.categoryParentName,
          sl: row.minBuyCount, //默认最小起订数量
          imagePath: row.imagePath,
          productAttr: row.productAttr,
          minBuyCount: row.minBuyCount,
          orderProductType: row.orderProductType || 10,
          depositRatio: Number(row.depositRatio),
          color: row.color,
          sku: row.sku,
          stockNum: parseInt(row.stockNum),
          produceAddress: row.produceAddress,
          produceAddressTxt: row.produceAddressTxt,
          sendDate: row.sendDate
        });
      }
      console.log("选择", row);
    },
    onCreaeOrderSave() {
      const defaultProducts = this.orderProduct
      const orderProducts = this.orderSelctProduct
      const newProducts = [...defaultProducts]
      orderProducts.forEach((item) => {
        const defualtitem = defaultProducts.find(f => f.productSkuId === item.productSkuId)
        if (!defualtitem) {
          newProducts.push({
            productName: item.productName,
            productId: item.productId,
            categoryParentName: item.categoryParentName,
            categoryName: item.categoryName,
            productPrice: item.productPrice,
            productAttr: item.productAttr,
            minBuyCount: item.minBuyCount,
            gmsl: item.sl,
            deliveryNum: 0,
            buyNum: item.sl,
            deliveryCount: item.sl,
            orderProductType: item.orderProductType,
            sku: item.sku,
            color: item.color,
            stockNum: item.stockNum,
            productAddress: item.produceAddressTxt,
            depositPrice: item.depositRatio,
            imagePath: item.imagePath,
            expectDeliveryTime: item.sendDate,
            yfhsl: 0,
            afterBuyNum: 0,
            deliveryNum: 0,
            totalNum: item.sl,
            productSkuId: item.productSkuId
          })
        }
      })

      this.orderProduct = newProducts
      console.log(this.orderProduct, ' this.orderProduct ')
      this.orderCreate = false;
    },
    //已选商品删除
    orderPDelete(index) {
      this.orderSelctProduct.splice(index, 1);
    },
    onCreaeOrderCancle() {
      this.orderSelctProduct = [];
      this.orderCreate = false;
    },
    loadProducts() {
      const $this = this;
      $this.orderProductLoading = true;
      OrderApi.getSkuProducts($this.orderProductForm, true)
        .then((result) => {
          const { code, data } = result;
          if (code === 1) {
            $this.orderProducts = data.records;
            $this.spTotal = data.total;
          }
          $this.orderProductLoading = false;
        })
        .catch((error) => {
          $this.orderProductLoading = false;
        });
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    addSave() {
      // 暂时取消
      // if (this.orderProduct.some(val => !val.deliveryCount)) {
      //   return ElMessage.warning("请完善表格数据在提交!");
      // }
      let obj = {
        orderId: this.orderFrom.orderId,
        deliveryNo: this.orderFrom.deliveryNo,
        deliveryTotalAmount: this.orderFrom.deliveryAmount,
        depositOutPrice: this.orderFrom.depositOutPrice,
        productList: this.orderProduct,
        deliveryBeforeAmount: this.orderFrom.deliveryBeforeAmount
      }
      console.log(obj, 'obj')
      this.saveLoading = true;
      ProductApi.deliveryV2(obj, true).then(res => {
        const { code, data } = res;
        this.saveLoading = false;
        if (code == 1) {
          ElMessage({
            message: '提交成功',
            type: 'success'
          });
          this.$emit('addSave')
          this.closeDialog();
        }
      }).catch(e => {
        this.saveLoading = false
      })
    },
    filterTypeName(value) {
      const item = this.productTypes.find(f => f.value === value)
      if (item)
        return item.name
      return ''
    },
    /*每页多少条*/
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.loading = true;
      self.curPage = val;
      self.getData();
    },
    // 前端随机生成id
    getRandomLetter() {
      const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
      return letters.charAt(Math.floor(Math.random() * letters.length));
    },
    // 修改数量计算金额
    selCount(row) {
      // if (row.deliveryCount) {
      this.rowCountLoading = true;
      let obj = {}
      if (row.orderProductId) {
        obj = { productPrice: row.productPrice, orderProductId: row.orderProductId, productSkuId: row.productSkuId, orderProductType: row.orderProductType, deliveryNum: row.deliveryCount || 0, specType: row.sendType || row.specType }
      } else {
        obj = { productPrice: row.productPrice, productId: row.productId, productSkuId: row.productSkuId, deliveryNum: row.deliveryCount || 0, orderProductType: row.orderProductType, specType: row.sendType || row.specType }

      }
      ProductApi.deliveryCalc(obj, true).then(res => {
        console.log(res, 'res')
        const { code, data } = res;
        row['deliveryAmount'] = data;
        // 计算总金额
        let Count = 0;
        this.orderProduct.map(val => {
          Count += Number(val.deliveryAmount || '0');
        })
        this.orderFrom.deliveryBeforeAmount = Number(Count).toFixed(2)
        // this.orderFrom.deliveryAmount = Count - Number(this.orderFrom.depositOutAmount || 0);
        // deliveryAmount 本次发货金额
        // depositOutAmount 定金补位
        // 如果列表的发货金额累加 大于定金补位(下单生成的)
        if (Count >= Number(this.orderFrom.depositOutAmount)) {
          // 本次发货总金额(按钮左边的数字) = 列表的发货金额累加 - 定金补位(下单生成的)
          this.orderFrom.deliveryAmount = (Count - Number(this.orderFrom.depositOutAmount || 0)).toFixed(2);
          // 本次补位余额 还是等于 定金补位(下单生成的)
          this.orderFrom.depositOutPrice = this.orderFrom.depositOutAmount;
        } else {
          // 否则如果 定金补位(下单生成的) 大于 列表的发货金额累加
          // 本次补位余额 等于 列表的发货金额累加 - 定金补位(下单生成的)
          this.orderFrom.depositOutPrice = Count;
          // 本次发货总金额(按钮左边的数字) = 0
          this.orderFrom.deliveryAmount = 0;
        }
        console.log(this.orderFrom.depositOutAmount, 'this.orderFrom.depositOutAmount')
        console.log(this.orderFrom.deliveryAmount, 'this.orderFrom.deliveryAmount')

        this.orderFrom = JSON.parse(JSON.stringify(this.orderFrom))
        this.rowCountLoading = false;
      }).catch(e => {
        this.rowCountLoading = false;
      })
      // }

    },
    generateRandomLetterArray(length = 10) {
      const randomLetterArray = [];
      for (let i = 0; i < length; i++) {
        randomLetterArray.push(this.getRandomLetter());
      }
      return randomLetterArray.join("");
    },
    /*获取列表*/
    getData() {
      let self = this;
      this.loading = true;
      let Params = {
        orderId: this.rowData.orderId
      }
      ProductApi.toDelivery(Params, true)
        .then(res => {
          console.log(res, 'res')
          this.loading = false
          const { code, data } = res;
          if (code == 1) {
            const { order, orderProduct, deliveryNo, deliveryTime, deliveryType, deliveryUserName, deliveryUserId } = data;
            this.orderFrom = { ...order, deliveryNo, deliveryTime, deliveryType, deliveryUserName, deliveryUserId };
            this.orderProduct = orderProduct;
            this.orderProduct.map(val => {
              val['rowID'] = this.generateRandomLetterArray();
              val['isEdit'] = false;
            })
            console.log(this.orderProduct, 'this.orderProduct')
          }

        })
        .catch(error => {
          self.loading = false;
        });
    },
    tagClick(row, cor) {
      row.colorList.map(val => val.check = false)
      cor.check = !cor.check;
      if (cor.check) {
        row.productSkuId = cor.productSkuId
        row.productAttr = cor.productAttr
      }
    },
    // 前端删除
    delRow(row) {
      const set1 = new Set([row].map(item => item['rowID']))
      const set2 = new Set(this.orderProduct.map(item => item['rowID']))
      const diff = [
        ...[row].filter(item => !set2.has(item['rowID'])),
        ...this.orderProduct.filter(item => !set1.has(item['rowID']))
      ]
      this.orderProduct = diff;
      this.orderProduct.map(order => {
        if (order.orderProductId == row.orderProductId && (!order.sendType || order.sendType == '20')) {
          order.deliveryCount = 0;
          order.isEdit = false;
        }
      })
      this.orderProduct = JSON.parse(JSON.stringify(this.orderProduct))
      setTimeout(() => {
        row.deliveryCount = 0
        this.selCount(row)
      }, 500)
    },
    // 超量超规格发货
    async copyRow(row, type) {
      // sendType "正常发货" type:20 "超量发货" type:30 "超规格发货" type:40
      this.isClickRow = true
      let _row = JSON.parse(JSON.stringify(row))
      _row['rowID'] = this.generateRandomLetterArray();
      _row['sendType'] = type;
      // 超规格
      if (type == '40') {
        await this.skuList(_row, row.productId);
      }
      this.orderProduct.push(_row);
      // 点击了超规格 置空原商品购买数量为0 
      this.orderProduct.map(order => {
        if (order.orderProductId == row.orderProductId && (!order.sendType || order.sendType == '20')) {
          order.deliveryCount = 0;
          order.deliveryAmount = 0;
          order.isEdit = true;
        }
      })
      setTimeout(() => {
        this.selCount(_row)
      }, 500)
    },
    // 获取规格
    skuList(_row, productId) {
      ProductApi.skuList({ productId }).then(res => {
        const { code, data } = res;
        console.log(data, 'data-----')
        _row['colorList'] = data
        //默认选择第一个
        _row['colorList'][0]['check'] = true;
        _row['productSkuId'] = data[0]['productSkuId']
        this.orderProduct = JSON.parse(JSON.stringify(this.orderProduct))

      })
    },
  }
};
</script>

<style scoped>
/deep/.el-tag {
  cursor: pointer !important;
  margin: 0 4px !important;
}
</style>
